<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>如风壁纸 - 分类详情</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="css/styles.css">
</head>
<body class="bg-gray-50 text-gray-900 font-sans">
    <div id="app" class="phone-container relative overflow-hidden mx-auto">
        <!-- Status Bar -->
        <div id="status-bar" class="status-bar flex justify-between items-center px-5 py-1 bg-black bg-opacity-10 text-white text-xs">
            <span id="time">9:41</span>
            <div class="status-icons flex space-x-1">
                <span><i class="fas fa-signal"></i></span>
                <span><i class="fas fa-wifi"></i></span>
                <span><i class="fas fa-battery-three-quarters"></i></span>
            </div>
        </div>

        <!-- Main Content Area -->
        <div id="content" class="content-area bg-white">
            <!-- Category Detail Content -->
            <div class="nav-header">
                <div class="back-btn" id="back-to-categories">
                    <i class="fas fa-chevron-left"></i>
                </div>
                <div class="page-title" id="category-title">类别名称</div>
                <div style="width: 40px;"></div>
            </div>
            
            <div class="wallpaper-grid">
                <!-- Wallpaper items will be dynamically added here -->
            </div>
        </div>

        <!-- Tab Bar -->
        <div id="tab-bar" class="tab-bar flex justify-around items-center px-2 py-3 bg-white border-t border-gray-200">
            <a href="home.html" class="tab-item flex flex-col items-center text-gray-500">
                <i class="fas fa-home text-lg"></i>
                <span class="text-xs mt-1">首页</span>
            </a>
            <a href="categories.html" class="tab-item flex flex-col items-center text-blue-500">
                <i class="fas fa-th-large text-lg"></i>
                <span class="text-xs mt-1">分类</span>
            </a>
            <a href="favorites.html" class="tab-item flex flex-col items-center text-gray-500">
                <i class="fas fa-heart text-lg"></i>
                <span class="text-xs mt-1">收藏</span>
            </a>
            <a href="settings.html" class="tab-item flex flex-col items-center text-gray-500">
                <i class="fas fa-cog text-lg"></i>
                <span class="text-xs mt-1">设置</span>
            </a>
        </div>
    </div>

    <script src="js/app.js"></script>
    <script>
        // Initialize clock for this page
        function updateClock() {
            const now = new Date();
            const hours = now.getHours().toString().padStart(2, '0');
            const minutes = now.getMinutes().toString().padStart(2, '0');
            document.getElementById('time').textContent = `${hours}:${minutes}`;
        }
        
        // Update clock
        updateClock();
        setInterval(updateClock, 60000);
        
        // Categories data (would normally come from a database or API)
        const categories = {
            'nature': {name: '自然风光', images: [1, 7]},
            'city': {name: '城市风景', images: [2, 8]},
            'abstract': {name: '抽象艺术', images: [3, 9]},
            'minimal': {name: '简约设计', images: [4, 10]},
            'dark': {name: '深色系列', images: [5]},
            'bright': {name: '明亮系列', images: [6]}
        };
        
        // Get category ID from URL
        const urlParams = new URLSearchParams(window.location.search);
        const categoryId = urlParams.get('id') || 'nature'; // Default to nature if no ID provided
        
        // Update title
        document.getElementById('category-title').textContent = categories[categoryId].name;
        
        // Generate wallpapers for this category
        const wallpaperGrid = document.querySelector('.wallpaper-grid');
        const imageIds = categories[categoryId].images;
        
        // Add wallpapers to the grid
        imageIds.forEach(id => {
            const wallpaperItem = document.createElement('div');
            wallpaperItem.className = 'wallpaper-item';
            wallpaperItem.setAttribute('data-id', id);
            
            const img = document.createElement('img');
            img.src = `https://picsum.photos/seed/wall${id}/900/1600`;
            img.alt = 'Wallpaper';
            img.setAttribute('loading', 'lazy');
            
            wallpaperItem.appendChild(img);
            wallpaperGrid.appendChild(wallpaperItem);
            
            // Add click event
            wallpaperItem.addEventListener('click', () => {
                window.location.href = `detail.html?id=${id}`;
            });
        });
        
        // Back button event
        document.getElementById('back-to-categories').addEventListener('click', () => {
            window.location.href = 'categories.html';
        });
    </script>
</body>
</html> 